<template>
  <el-form-item :label="element.label" :prop="element.model" v-if="element.type !== 'grid'">
    <template v-if="element.type === 'input'">
      <el-input
        v-model="formModel[element.model]"
        :style="{ width: element.options.width }"
        :placeholder="element.options.placeholder"
        :clearable="element.options.clearable"
        :maxlength="element.options.maxLength"
        :disabled="element.options.disabled"
      >
        <template #prepend v-if="element.options.prepend">{{ element.options.prepend }}</template>
        <template #append v-if="element.options.append">{{ element.options.append }}</template>
      </el-input>
    </template>

    <template v-else-if="element.type === 'textarea'">
      <el-input
        type="textarea"
        v-model="formModel[element.model]"
        :style="{ width: element.options.width }"
        :placeholder="element.options.placeholder"
        :rows="element.options.rows"
        :maxlength="element.options.maxLength"
        :disabled="element.options.disabled"
      />
    </template>

    <template v-else-if="element.type === 'number'">
      <el-input-number
        v-model="formModel[element.model]"
        :style="{ width: element.options.width }"
        :min="element.options.min"
        :max="element.options.max"
        :step="element.options.step"
        :disabled="element.options.disabled"
      />
    </template>

    <template v-else-if="element.type === 'radio'">
      <el-radio-group v-model="formModel[element.model]" :disabled="element.options.disabled">
        <el-radio
          v-for="item in element.options.options"
          :key="item.value"
          :label="item.value"
        >
          {{ item.label }}
        </el-radio>
      </el-radio-group>
    </template>

    <template v-else-if="element.type === 'checkbox'">
      <el-checkbox-group v-model="formModel[element.model]" :disabled="element.options.disabled">
        <el-checkbox
          v-for="item in element.options.options"
          :key="item.value"
          :label="item.value"
        >
          {{ item.label }}
        </el-checkbox>
      </el-checkbox-group>
    </template>

    <template v-else-if="element.type === 'select'">
      <el-select
        v-model="formModel[element.model]"
        :style="{ width: element.options.width }"
        :placeholder="element.options.placeholder"
        :clearable="element.options.clearable"
        :multiple="element.options.multiple"
        :disabled="element.options.disabled"
      >
        <el-option
          v-for="item in element.options.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </template>

    <template v-else-if="element.type === 'switch'">
      <el-switch v-model="formModel[element.model]" :disabled="element.options.disabled" />
    </template>

    <template v-else-if="element.type === 'slider'">
      <el-slider
        v-model="formModel[element.model]"
        :style="{ width: element.options.width }"
        :min="element.options.min"
        :max="element.options.max"
        :step="element.options.step"
        :show-stops="element.options.showStops"
        :disabled="element.options.disabled"
      />
    </template>

    <template v-else-if="element.type === 'date'">
      <el-date-picker
        v-model="formModel[element.model]"
        :style="{ width: element.options.width }"
        :placeholder="element.options.placeholder"
        :clearable="element.options.clearable"
        :disabled="element.options.disabled"
        :format="element.options.format"
        value-format="YYYY-MM-DD"
      />
    </template>

    <template v-else-if="element.type === 'time'">
      <el-time-picker
        v-model="formModel[element.model]"
        :style="{ width: element.options.width }"
        :placeholder="element.options.placeholder"
        :clearable="element.options.clearable"
        :disabled="element.options.disabled"
        :format="element.options.format"
        value-format="HH:mm:ss"
      />
    </template>

    <template v-else-if="element.type === 'rate'">
      <el-rate
        v-model="formModel[element.model]"
        :max="element.options.max"
        :allow-half="element.options.allowHalf"
        :disabled="element.options.disabled"
      />
    </template>

    <template v-else-if="element.type === 'color'">
      <el-color-picker
        v-model="formModel[element.model]"
        :show-alpha="element.options.showAlpha"
        :disabled="element.options.disabled"
      />
    </template>

    <template v-else-if="element.type === 'upload'">
      <el-upload
        v-model:file-list="formModel[element.model]"
        :action="element.options.action"
        :multiple="element.options.multiple"
        :limit="element.options.limit"
        :accept="element.options.accept"
        :disabled="element.options.disabled"
      >
        <el-button type="primary" :disabled="element.options.disabled">点击上传</el-button>
      </el-upload>
    </template>
  </el-form-item>

  <el-row :gutter="element.options.gutter" v-else-if="element.type === 'grid'">
    <el-col
      v-for="(col, index) in element.columns"
      :key="index"
      :span="col.span"
    >
      <generate-form-item
        v-for="(item, i) in col.list"
        :key="i"
        :element="item"
        :form-model="formModel"
      />
    </el-col>
  </el-row>
</template>

<script setup>
defineProps({
  element: {
    type: Object,
    required: true
  },
  formModel: {
    type: Object,
    required: true
  }
})
</script>